import React from 'react';
import hashHistory from '../hashHistory';
import {
    Menu,
    MenuProps,
    Layout
} from 'antd';

const { Header } = Layout;

const HeaderComponent: React.FC = () => {
    const navItems = [
        { name: '首页', path: '/' },
        { name: 'UI演示', path: '/ui' },
        { path: '/home2', name: 'Home2' },
        { path: '/cannonDemo', name: '物理引擎' },
        { path: '/fabricDemo', name: 'Fabric演示' },
        { name: 'Ollama测试', path: '/ollamaTest' },
        { path: '/web3Demo', name: 'Web3演示' },
        { path: '/mysqlEventManager', name: 'MySQL事件管理' },
        { path: '/dataViewer', name: '数据查看器' },
        { path: '/myImg', name: '我的图片' },
        { path: '/cadConversion', name: 'CAD转换' },
    ];

    // 获取当前激活的菜单项 - 处理hashHistory的URL格式
    const getCurrentPath = () => {
        // 检查是否存在hash路由
        if (location.hash) {
            // 提取hash中的路径部分，如从 #/dataViewer 提取出 /dataViewer
            return location.hash.replace('#', '');
        }
        // 回退到使用pathname
        return location.pathname;
    };

    const currentPath = getCurrentPath();
    const defaultSelectedKeys = navItems
        .filter(item => item.path === currentPath)
        .map(item => item.path);

    const handleMenuClick: MenuProps['onClick'] = ({ key }) => {
        hashHistory.push(key);
    };

    // 转换为 items 格式
    const menuItems = navItems.map(item => ({
        key: item.path,
        label: item.name,
    }));

    return (
        <Header style={{ backgroundColor: '#fff' }}>
            <Menu
                mode="horizontal"
                defaultSelectedKeys={defaultSelectedKeys.length > 0 ? defaultSelectedKeys : ['/']}
                onClick={handleMenuClick}
                style={{ lineHeight: '64px' }}
                items={menuItems} // 使用 items 属性替代 children
            />
        </Header>
    );
};

export default HeaderComponent;